<template>
  <view class="reserveList">
    <custom-navi :show-home="false">{{title}}</custom-navi>
	<view class="reserveList-hint">
		<image src="/static/icon/jg.png" mode=""></image>
		{{hint}}
	</view>
    <view class="list">
		<view class="list-box">
			<view class="list-box-option" v-for="(item,index) in optionData" :key='index' :class="{pitch:pitchs===index}" @click="pitchon(index)">{{item.txt}}{{item.tag}}</view>
		</view>
		<view class="list-input">
			<input type="number" value="" placeholder="请选择或输入..." placeholder-style="font-size:28rpx;" @input="write"/>
		</view>
		<view class="list-btn" @click="confirm">
			确认
		</view>
	</view>
  </view>
</template>

<script>
import CONSTS from '@/src/consts';
import {saveUpdateStoreFunction} from "../../api.js"
export default {
	data(){
		return{
			title:'相同时段最高接单数',
			hint:'超出预订单数将停止接单',
			pitchs:'',
			type:'',
			shopId:'',
			inputTxt:'',
			maxOrderNum:'',
			appointmentSaveTime:'',
			optionData:[],
			numData:[
				{txt:'5',tag:'笔'},
				{txt:'10',tag:'笔'},
				{txt:'15',tag:'笔'},
				{txt:'20',tag:'笔'},
				{txt:'25',tag:'笔'},
				{txt:'30',tag:'笔'},
			],
			timeData:[
				{txt:'30',tag:'分钟'},
				{txt:'40',tag:'分钟'},
				{txt:'50',tag:'分钟'},
				{txt:'60',tag:'分钟'},
				{txt:'120',tag:'分钟'},
				{txt:'180',tag:'分钟'},
			],
		}
	},
	onLoad(option) {
		const _self = this
		 uni.getStorage({
		   key: 'shopInfo',
		   success: function (res) {
		     _self.shopId = res.data.id
		   }
		 });
		console.log(option.type);
		this.type = option.type
		if(option.type==='1'){
			this.optionData = this.numData
		}else{
			this.optionData = this.timeData
			this.title = '预订保留时间'
			this.hint = '超出预订时间系统自动取消'
		}
	},
	methods:{
		pitchon(index){
			if(this.inputTxt === ''){
				this.pitchs = index
			}
		},
		write(e){
			console.log(e.detail.value)
			this.pitchs = ''
			this.inputTxt = e.detail.value
		},
		async confirm(){
			console.log(this.type)
			if(this.type === '1'){
				if(this.inputTxt === '' && this.pitchs === ''){
					return this.$utils.common.toast.fail("请选择选择或输入单数");
				}else if(this.inputTxt === ''){
					this.maxOrderNum = this.optionData[this.pitchs].txt
					
				}else{
					this.maxOrderNum = this.inputTxt
					
				}
				const params = {
					storeId:this.shopId,
					maxOrderNum:this.maxOrderNum, // 相同时段最高接单数
				}
				console.log(params)
				try {
				  const { data } = await saveUpdateStoreFunction(params)
				  console.log(data)
				  this.$utils.common.toast.fail("提交成功");
				  setTimeout(() => {
				    this.$utils.common.navigateBack()
				  }, 1000)
				} catch (err) {
				  if (err.code !== 200) {
				    // this.$utils.common.toast.fail(err.data.message);
				  }
				}
			}else{
				if(this.inputTxt === '' && this.pitchs === ''){
					return this.$utils.common.toast.fail("请选择选择或输入时间");
				}else if(this.inputTxt === ''){
					this.appointmentSaveTime = this.optionData[this.pitchs].txt
					
				}else{
					this.appointmentSaveTime = this.inputTxt
					
				}
				const params = {
					storeId:this.shopId,
					appointmentSaveTime:this.appointmentSaveTime, // 预约保留时间（单位：分钟）
				}
				try {
				  const { data } = await saveUpdateStoreFunction(params)
				  console.log(data)
				  this.$utils.common.toast.fail("提交成功");
				  setTimeout(() => {
				    this.$utils.common.navigateBack()
				  }, 1000)
				} catch (err) {
				  if (err.code !== 200) {
				   // this.$utils.common.toast.fail(err.data.message);
				  }
				}
			}
			const params = {
				storeId:this.shopId,
				appointmentSaveTime:this.appointmentSaveTime, // 预约保留时间（单位：分钟）
				maxOrderNum:this.maxOrderNum, // 相同时段最高接单数
			}
			
			console.log(params)
		}
	}
}
</script>

<style lang="scss" scoped>
	.reserveList{
		&-hint{
			display: flex;
			align-items: center;
			padding: 6rpx 32rpx;
			background:rgba(253,250,216,1);
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,161,11,1);
			opacity:1;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.list{
			width:750rpx;
			height:782rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			padding: 10rpx 44rpx 62rpx 44rpx;
			&-box{
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
				&-option{
					width:200rpx;
					height:70rpx;
					text-align: center;
					line-height: 70rpx;
					background:rgba(255,255,255,1);
					border:2rpx solid rgba(224,224,224,1);
					border-radius:10rpx;
					margin-top: 52rpx;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(154,154,154,1);
					opacity:1;
				}
				.pitch{
					background:rgba(12,212,211,1);
					color: rgba(255, 255, 255, 1);
					border:2rpx solid rgba(12,212,211,1);
				}
			}
			&-input{
				margin-top: 52rpx;
				padding: 28rpx;
				border-bottom: 2rpx solid rgba(227, 227, 227, 1);
				input{
					// width:224px;
					// height:38px;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:500;
					// line-height:38px;
					// color:rgba(224,224,224,1);
					// opacity:1;
				}
			}
			&-btn{
				width:660rpx;
				height:100rpx;
				background:rgba(12,212,211,1);
				opacity:1;
				border-radius:10rpx;
				font-size:34rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				opacity:1;
				text-align: center;
				line-height: 100rpx;
				margin-top: 104rpx;
			}
		}
	}
</style>